<!--
 * @Description:
 * @Author: zhailei
 * @Date: 2021-07-09 09:14:57
 * @LastEditTime: 2021-07-09 13:40:27
 * 
 * @FilePath: \-cloud-vue\src\pages\system\sysAppBasics\listPage.vue
-->
<template>
  <div class="padding basic-set">
    <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
      <a-form-item class="hiddenItem">
        <a-input v-decorator="['uuid']" disabled type="hidden" />
      </a-form-item>
      <a-form-item label="分类">
        <a-select
          placeholder="请选择分类"
          v-decorator="[
            'moduleUuid',
            { rules: [{ required: true, message: '名称不能为空' }] },
          ]"
        >
          <a-select-option v-for="item in classifyData" :key="item.uuid">
            {{ item.classifyName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$ct('name', '名称')">
        <a-input
          placeholder="请输入名称"
          v-decorator="[
            'name',
            {
              rules: [
                {
                  required: true,
                  message: '名称不能为空',
                },
                {
                  pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
                  message: '只能包含英文、数字、汉字、下划线',
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item :label="$ct('reportCode', '编码')">
        <a-input
          placeholder="请输入编码"
          v-decorator="[
            'code',
            {
              rules: [
                {
                  required: true,
                  message: '编码不能为空',
                },
                {
                  pattern: /^[0-9A-Za-z]{4,50}$/,
                  message: '编码只能是数字和字母，且长度要在4-50位之间！！！',
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item :label="$ct('state', '状态')">
        <a-switch
          default-checked
          v-decorator="['status', { initialValue: true }]"
        />
      </a-form-item>
      <a-form-item :label="$ct('sort', '排序')">
        <a-input-number
          placeholder="请输入排序"
          v-decorator="['sort']"
          :min="1"
          :max="9999"
        />
      </a-form-item>
      <a-form-item :label="$ct('describe', '描述')">
        <a-textarea
          placeholder="请输入描述"
          :rows="3"
          v-decorator="['configureDesc']"
        />
      </a-form-item>
      <a-form-item label="数据接口" v-if="formType === 'viewData'">
        <view-data-list
          @change="viewDataChange"
          v-decorator="[
            'interfaceName',
            { rules: [{ required: true, message: '请选择接口' }] },
          ]"
        >
        </view-data-list>
        <a-input v-decorator="['interfaceUuid']" disabled type="hidden" />
      </a-form-item>
      <div v-if="formType === 'viewData'">
        <a-table
          size="small"
          :columns="columns"
          :data-source="dataSource"
          :pagination="false"
          :scroll="{ y: 'calc(50vh - 100px)' }"
        >
          <template slot="renderParamsValue" slot-scope="text, record, index">
            <a-input
              v-model="record['paramsValue']"
              @change="handleChange($event, record, 'paramsValue')"
            />
          </template>
        </a-table>
      </div>
    </a-form>
    <tableModal ref="tableModal" :visible="tableVisible" @ok="selector" />
  </div>
</template>

<script>
import pick from "lodash.pick";
import tableModal from "./tableModal";
import viewDataList from "@/components/TopVUI/custom/viewDataList";
const fields = [
  "uuid",
  "moduleUuid",
  "name",
  "code",
  "status",
  "sort",
  "configureDesc",
  "interfaceUuid",
  "interfaceName",
];
export default {
  components: { tableModal, viewDataList },
  props: {
    isEdit: Boolean,
    formType: String,
    interfaceUuid: String,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      classifyData: [],
      tableVisible: false,
      model: {},
      columns: [
        {
          title: "参数名称",
          align: "center",
          dataIndex: "paramsName",
        },
        {
          title: "参数值",
          align: "center",
          dataIndex: "paramsValue",
          scopedSlots: { customRender: "renderParamsValue" },
        },
      ],
      dataSource: [],
    };
  },
  mounted() {
    this.getClassifyData();
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.dataSource = this.model.queryParam
        ? JSON.parse(this.model.queryParam)
        : [];
      this.model && this.form.setFieldsValue(pick(this.model, fields));
      this.$emit("update:interfaceUuid", this.model.interfaceUuid);
    });
  },
  methods: {
    getClassifyData() {
      this.$post("/form/formModule/selectAll").then((res) => {
        if (res.statusCode === 200) {
          this.classifyData = res.data;
        }
      });
    },
    validateData() {
      let data = {};
      this.form.validateFields((errors, values) => {
        if (!errors) {
          data = values;
        } else {
          data = null;
        }
      });
      return data;
    },
    getBasicData() {
      if (this.formType === "viewData") {
        return {
          ...this.form.getFieldsValue(),
          queryParam: JSON.stringify(this.dataSource),
        };
      } else {
        return this.form.getFieldsValue();
      }
    },
    selector(e) {
      this.tableVisible = false;
    },
    viewDataChange(name, uuid) {
      this.$emit("update:interfaceUuid", uuid);
      this.form.setFieldsValue({
        interfaceUuid: uuid,
      });
      this.$post("/system/sysInterfaceManagement/getDetailByUuid", {
        uuid,
      }).then((res) => {
        if (res.statusCode === 200) {
          const data = res.data;
          // 01 静态数据
          // 02 接口数据
          // 03 sql数据
          if (data.interfaceType === "intetface_type.03") {
            this.dataSource = data.sqlParameters
              ? JSON.parse(data.sqlParameters)
              : [];
          } else if (data.interfaceType === "intetface_type.02") {
            this.dataSource = data.requestParameters
              ? JSON.parse(data.requestParameters)
              : [];
          }
        }
      });
    },
    handleChange(e, record, key) {
      record[key] = e.target.value;
    },
  },
};
</script>

<style lang="scss" scoped>
// .ant-form{
// 	border-radius: 10px;
// 	min-height: 500px;
// 	margin: 0 auto;
// 	padding: 30px 20px 50px 20px;
// 	box-shadow: 1px 2px 8px #e8e8e8;
// }

.basic-set {
  height: calc(100vh - 76px);
  margin: 10px;
  background-color: #fff;
}

.col-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  height: calc(100vh - 116px);
}
</style>
